﻿@model MyPortfolio.Models.HomePageModel
@{
    ViewBag.Title = "和桥互生";
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>@ViewBag.Title</title>
    <meta name="generator" content="Bootply" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="description" content="@ViewBag.MetaDescription" />
    <meta name="keywords" content="@ViewBag.MetaKeywords" />
    @Styles.Render("~/css/heqiaohusheng")
    <!--[if lt IE 9]>
			<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
    <!-- script references -->

    <style>
        /* Demo Styles */
        html {
            height: 100%;
        }

        body {
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 13px;
            line-height: 1.5;
            position: relative;
            height: 100%;
        }

        .swiper-container {
            width: 100%;
            height: 600px;
            color: #fff;
            text-align: center;
        }

        .red-slide {
            background: url('/resource/images/banner1.jpg') no-repeat center top fixed;
        }

        .blue-slide {
            background: #4390ee;
        }

        .orange-slide {
            background: #ff8604;
        }

        .green-slide {
            background: #49a430;
        }

        .pink-slide {
            background: #973e76;
        }

        .swiper-slide .title {
            font-style: italic;
            font-size: 42px;
            margin-top: 80px;
            margin-bottom: 0;
            line-height: 45px;
        }

        .pagination {
            position: absolute;
            z-index: 20;
            left: 10px;
            bottom: 10px;
        }

        .swiper-pagination-switch {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 8px;
            background: #222;
            margin-right: 5px;
            opacity: 0.8;
            border: 1px solid #fff;
            cursor: pointer;
        }

        .swiper-visible-switch {
            background: #aaa;
        }

        .swiper-active-switch {
            background: #fff;
        }
    </style>
</head>
<body>
    <!-- Wrap all page content here -->
    <div id="wrap">

        <header class="masthead">
            <!--<div class="container">-->
            <div class="row">
                <div class="col-sm-6">
                    <!--<h1>
            <a href="#" title="heqiao">标题链接</a>
          <p class="lead">{Some information here...}</p></h1>-->
                </div>
                <!--<div class="col-sm-6">
        <div class="pull-right  hidden-xs">    
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><h3><i class="glyphicon glyphicon-cog"></i></h3></a>
          <ul class="dropdown-menu">
              <li><a href="#"><i class="glyphicon glyphicon-chevron-right"></i> Link</a></li>
              <li><a href="#"><i class="glyphicon glyphicon-user"></i> Link</a></li>
              <li><a href="#"><i class="glyphicon glyphicon-lock"></i> Link</a></li>
              <li><a href="#"><i class="glyphicon glyphicon-cog"></i> Link</a></li>
          </ul>
        </div>
      </div>-->
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide red-slide">
                            <div class="title"></div>
                        </div>
                        <div class="swiper-slide blue-slide">
                            <div class="title">和桥互生</div>
                        </div>
                        <div class="swiper-slide orange-slide">
                            <div class="title">和桥互生</div>
                        </div>
                        <div class="swiper-slide green-slide">
                            <div class="title">和桥互生</div>
                        </div>
                        <div class="swiper-slide pink-slide">
                            <div class="title">和桥互生</div>
                        </div>
                        <div class="swiper-slide red-slide">
                            <div class="title">和桥互生</div>
                        </div>
                        <div class="swiper-slide blue-slide">
                            <div class="title">和桥互生</div>
                        </div>
                        <div class="swiper-slide orange-slide">
                            <div class="title">和桥互生</div>
                        </div>
                    </div>
                    <div class="pagination"></div>
                </div>
            </div>
        </header>
    </div>

    <!-- Fixed navbar -->
    <div class="navbar navbar-custom navbar-inverse navbar-static-top" id="nav">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav nav-justified">
                    <li><a href="#">首页</a></li>
                    <li><a href="#section2">产品介绍</a></li>
                    <li><a href="#section3">新闻</a></li>
                    <li class="active"><a href="#section1"><strong>大品牌</strong></a></li>
                    <li><a href="#section4">关于我们</a></li>
                    <li><a href="#section5">联系我们</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">更多 <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Section1</a></li>
                            <li><a href="#Section1">Section2</a></li>
                            <li><a href="#Section2">Section3</a></li>
                            <li><a href="#Section3">Section4</a></li>
                            <li><a href="#Section4">Section5</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
        <!--/.container -->
    </div>
    <!--/.navbar -->

    <!-- Begin page content -->
    <div class="divider" id="section1"></div>

    <div class="container">
        <div class="col-sm-10 col-sm-offset-1">
            <div class="page-header text-center">
                <h1>携手和桥，互利共赢</h1>
            </div>

            <p class="lead text-center">
                锁定、抢占、分享首批10万会员
            </p>
            <p class="text-center">
                携手和桥互生积分卡，消费也能挣钱
            </p>
            <p class="text-center">
                1积分 = 1RMB，免费医疗补贴计划
            </p>
            <p class="text-center">
                积少成多，秒结到账
            </p>
        </div>
    </div>

    <div class="divider" id="section2"></div>

    <section class="bg-1">
        <div class="col-sm-6 col-sm-offset-3 text-center">
            <h2 style="padding: 20px; background-color: rgba(5,5,5,.8)">一卡在手 消费赚钱</h2>
        </div>
    </section>

    <div class="divider"></div>

    <div class="container" id="section3">
        <div class="col-sm-8 col-sm-offset-2 text-center">
            <h1>以和为贵，互利共赢</h1>

            <p>
                通过几年的市场探索和调研，吸取了积分卡市场的优劣沉沦的经验教训，通过整合，提炼和实践，创造了和桥互生积分卡
            </p>
            <p>
                “积少成多，分分兑现”的全新商业模式
            </p>

            <hr>

            <img src="/resource/images/foot01.jpg" class="img-responsive">

            <hr>
        </div>
        <!--/col-->
    </div>
    <!--/container-->

    <div class="divider"></div>

    <section class="bg-3" id="section4">
        <div class="col-sm-6 col-sm-offset-3 text-center">
            <h2 style="padding: 20px; background-color: rgba(5,5,5,.8)">秒结到账！所有的消费积分通过平台技术进行格式化的统一分配</h2>
        </div>
    </section>

    <div class="continer bg-4">
        <div class="row">
            <div class="col-sm-4 col-xs-6">

                <div class="panel panel-default">
                    <div>
                        <img src="/resource/images/heico01.jpg" class="img-responsive">
                    </div>
                    <div class="panel-body">
                        <p class="lead">信息栏1</p>
                        <p>您的展示信息内容1</p>

                        <p>
                            <img src="/resource/images/publicIco01.jpg" width="28px" height="28px">
                        </p>
                    </div>
                </div>
                <!--/panel-->
            </div>
            <!--/col-->

            <div class="col-sm-4 col-xs-6">

                <div class="panel panel-default">
                    <div class="panel-thumbnail">
                        <img src="/resource/images/heico02.jpg" class="img-responsive">
                    </div>
                    <div class="panel-body">
                        <p class="lead">信息栏2</p>
                        <p>您的展示信息内容2</p>

                        <p>
                            <img src="/resource/images/publicIco01.jpg" width="28px" height="28px">
                        </p>
                    </div>
                </div>
                <!--/panel-->
            </div>
            <!--/col-->

            <div class="col-sm-4 col-xs-6">

                <div class="panel panel-default">
                    <div class="panel-thumbnail">
                        <img src="/resource/images/heico03.jpg" class="img-responsive">
                    </div>
                    <div class="panel-body">
                        <p class="lead">信息栏3</p>
                        <p>您的展示信息内容3</p>

                        <p>
                            <img src="/resource/images/publicIco01.jpg" width="28px" height="28px">
                        </p>
                    </div>
                </div>
                <!--/panel-->

            </div>
            <!--/col-->
        </div>
        <!--/row-->
    </div>
    <!--/container-->

    <div class="divider" id="section5"></div>

    <div class="row">

        <h1 class="text-center">桥和投资管理(上海)</h1>

        <div id="map-canvas"></div>

        <hr>

        <div class="col-sm-8">

            <div class="row form-group">
                <div class="col-xs-5">
                    <input type="text" class="form-control" id="firstName" name="firstName" placeholder="姓" required="">
                </div>
                <div class="col-xs-5">
                    <input type="text" class="form-control" id="lastName" name="firstName" placeholder="名" required="">
                </div>
            </div>
            <div class="row form-group">
                <div class="col-xs-5">
                    <input type="email" class="form-control" name="email" placeholder="邮箱" required="">
                </div>
                <div class="col-xs-5">
                    <input type="email" class="form-control" name="phone" placeholder="联系电话" required="">
                </div>
            </div>
            <div class="row form-group">
                <div class="col-xs-10">
                    <input type="homepage" class="form-control" placeholder="个人主页地址" required="">
                </div>
            </div>
            <div class="row form-group">
                <div class="col-xs-10">
                    <button class="btn btn-default pull-right">联系我们</button>
                </div>
            </div>

        </div>
        <div class="col-sm-3 pull-right">

            <address>
                <strong>abc, LLC.</strong><br>
                上海市长宁区中山西路1065号<br>
                SOHO中山广场B506室<br>
                电话: (021) 6043 8837<br />
                传真: (021) 6043 8836
     
            </address>

            <address>
                <strong>我们的邮箱</strong><br>
                <a href="mailto:#">first.last@example.com</a>
            </address>
        </div>

    </div>
    <!--/row-->

    <div class="container">
        <div class="col-sm-8 col-sm-offset-2 text-center">
            <h2>携手和桥互生，从现在开始</h2>

            <hr>
            <h4>真诚期待您的参与
            </h4>
            <p>您可以从这里获取更多 <a href="#">和桥互生</a>.</p>
            <hr>
            <ul class="list-inline center-block">
                <li><a href="#">
                    <img src="/resource/images/publicIco01.jpg"></a></li>
                <li><a href="#">
                    <img src="/resource/images/publicIco01.jpg"></a></li>
                <li><a href="#">
                    <img src="/resource/images/publicIco01.jpg"></a></li>
                <li><a href="#">
                    <img src="/resource/images/publicIco01.jpg"></a></li>
            </ul>

        </div>
        <!--/col-->
    </div>
    <!--/container-->
    <!--end page content-->

    <div id="footer">
        <div class="container">
            <p class="text-muted">Copyright © The Four 版权所有 <a href="#">thefour.com</a></p>
        </div>
    </div>

    <ul class="nav pull-right scroll-top">
        <li><a href="#" title="Scroll to top"><i class="glyphicon glyphicon-chevron-up"></i></a></li>
    </ul>

    @Scripts.Render("~/js/heqiaohusheng")
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            pagination: '.pagination',
            paginationClickable: true
        })
    </script>
</body>
</html>
